tags: 鐵人賽 React javascript nodejs vscode

• 來到了鐵人賽的第二天。今天我們要講解如何快速地建構好開發React的環境，我們會使用create-react-app這套工具。

安裝 create-react-app

• create-react-app是一套由官方維護的js套件，簡單來說，它把所有會用到的工具套件都幫你安裝完畢，這對新手菜雞們來說，可是一大福音。

1. 先建立一個資料夾，方便我們未來coding:

• MacOS及Linux可以建立在~/Documents/react-rookie
• Windows可以建立在D:\react-rookie

2. 輸入以下指令，開始安裝

npx create-react-app my-app

補腦時間:npx指令是啥?

• 先聊聊昨天安裝好的npm，全名為node package management，是nodejs的套件管理工具，就像是一個App Store一樣，要什麼工具就可透過它下載及管理套件。

• 不過npm有些缺點，例如：我們下達一個指令npm install -g tool-package，這個套件本身若有使用到其他套件，也就俗稱的相依套件(dependency)，相依的部分也會跟著一起被安裝進來。隨著你開發的專案越多，使用的套件也會跟著變多，重複安裝的套件可能性提高，造成 版本污染(見下方補充) 的問題。?

• -g代表著global，也就是把這個套件安裝在一個大家都看得到的地方。

• 為了解決這樣的問題，npx就像救世主一樣現身了，安裝套件時，他會把相依的套件放在一個臨時的資料夾，等到主要的套件完成初始化後，就刪除後掰掰不送，乾淨利落?

• 版本污染就跟你有兩個心儀的女生都叫CoCo，手機電話簿裡都輸入CoCo，哪一天CoCo打來說妳都不陪她，妳可能會滿臉黑人問號的想著～到底是哪個摳摳?。

• 官網也力推我們用npx，那就安心服用吧
  

動起來～React!

1. 先開啟你的瀏覽器(browser)
2. 打開終端機(terminal)輸入指令到專案資料夾~/Documents/react-rookie/my-app

• MacOS及Linux的用戶

cd ~/Documents/react-rookie/my-app
npm start

• Windows的用戶

cd D:\react-rookie\my-app
npm start

3. 轉吧～React!?

解析資訊

• 按下npm start之後，順勢啟動了server加上3000的port，外部的人也可以連進來看看你的成果。疑~?我們不是做前端嗎？誰幫我弄了個server?

• 這都得歸功於create-react-app這套件，裡面也很佛心的幫你把前端的網頁用一個server給包裝起來，讓你一個按鍵就能看到網頁，優秀吧！?

• 

改個東西讓畫面不一樣

-用vscode打開App.js，在第14行的地方加入一段程式碼，並按下儲存！

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        {/* 加一段程式碼 */}
        <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

• server自動的reload，看看瀏覽器(browser)，出現了一段黃色的文字，沒錯! You did a good job!!???

結論

• 今天的你又比昨天強了一些，你知道怎麼建構React的環境，並從裡面去修改文字，看到了成果，給自己歡呼一下。
• 明天我們將說明create-react-app所構建出來的環境，讓大家了解一下裡頭的檔案結構，暗藏了哪些玄機。

參考資源

• create-react-app
• npx 是什麼? 跟 npm 差在哪?